<script setup lang="ts">
import { ref } from 'vue'
const traceabilityData = ref()
traceabilityData.value = {
  name:'预制菜套餐A',
  code:'1234567890',
  traceabilityCode:'1234567890',
  image:'https://pic2.zhimg.com/v2-36fa488ae45cc6e66970474156216c84_r.jpg',
  transportInfo:[{
    time:'2024-01-20 14:30',
    event:'商品出库',
    location:'广州市配送中心'
  },
  {
    time:'2024-01-20 14:30',
    event:'商品出库',
    location:'广州市配送中心',
  },
  {
    time:'2024-01-20 14:30',
    event:'商品出库',
    location:'广州市配送中心',  
  }
],
materials: [
  {
    name: '土豆',
    origin: '甘肃定西',
    supplier: '定西农产品基地',
    batch: 'PT20240115001',
    checkResult: '合格'
  },
  {
    name: '生姜',
    origin: '山东潍坊',
    supplier: '潍坊蔬菜基地',
    batch: 'GJ20240115002',
    checkResult: '合格'
  },
  {
    name: '食用油',
    origin: '广东湛江',
    supplier: '金龙鱼油脂有限公司',
    batch: 'OL20240115003',
    checkResult: '合格'
  }
]
}
</script>

<template>
  <view class="container">  
    <!-- 溯源总览 -->
    <view class="card overview-card">
      <view class="card-header">
        <text class="card-title">溯源总览</text>
      </view>
      <view class="overview-content">
        <view class="overview-info">
          <text class="status-text">溯源通过</text>
          <view class="info-item">
            <text class="label">商品名称：</text>
            <text class="value">{{ traceabilityData.name }}</text>
          </view>
          <view class="info-item">
            <text class="label">商品编号：</text>
            <text class="value">{{ traceabilityData.code }}</text>
          </view>
          <view class="info-item">
            <text class="label">溯源码：</text>
            <text class="value">{{ traceabilityData.traceabilityCode }}</text>
          </view>
        </view>
        <image
          alphabetic="https://pic2.zhimg.com/v2-36fa488ae45cc6e66970474156216c84_r.jpg"
          mode="aspectFill"
          class="product-image"
        />
      </view>
    </view>

    <!-- 溯源详情 -->

    <!-- 物流溯源 -->
    <view class="card detail-card">
      <view class="card-header">
        <text class="card-title">物流溯源</text>
      </view>
      <view class="detail-content">
        <view class="timeline">
          <view class="timeline-item" v-for="item in traceabilityData.transportInfo" :key="item.time">
            <view class="time-point active"></view>
            <view class="timeline-info">
              <text class="time">{{ item.time }}</text>
              <text class="event">{{ item.event }}</text>
              <text class="location">{{ item.location }}</text>
            </view>
          </view>
          
        </view>
      </view>
    </view>

    <!-- 材料溯源 -->
    <view class="card detail-card">
      <view class="card-header">
        <text class="card-title">材料溯源</text>
      </view>
      <view class="materials-content">
        <view 
          class="material-item"
          v-for="(item, index) in traceabilityData.materials"
          :key="index"
        >
          <view class="material-header">
            <view class="material-name">
              <text class="name">{{ item.name }}</text>
              <text 
                class="check-result"
                :class="{ pass: item.checkResult === '合格' }"
              >
                {{ item.checkResult }}
              </text>
            </view>
            <text class="batch-number">批次号：{{ item.batch }}</text>
          </view>
          <view class="material-details">
            <view class="detail-item">
              <text class="detail-label">产地</text>
              <text class="detail-value">{{ item.origin }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">供应商</text>
              <text class="detail-value">{{ item.supplier }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

 </view>
</template>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 30rpx;
}

.card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.card-header {
  margin-bottom: 30rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  position: relative;
  padding-left: 24rpx;
}

.card-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 28rpx;
  background: #63aa5d;
  border-radius: 3rpx;
}

.overview-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.overview-info {
  flex: 1;
}

.status-text {
  color: #63aa5d;
  font-size: 36rpx;
  font-weight: 600;
  margin-bottom: 30rpx;
  display: block;
}

.info-item {
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
}

.label {
  color: #666;
  font-size: 28rpx;
  width: 140rpx;
}

.value {
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
}

.product-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
  margin-left: 40rpx;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.timeline {
  padding: 20rpx 0;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  position: relative;
  padding-left: 30rpx;
  margin-bottom: 40rpx;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: 10rpx;
  top: 30rpx;
  bottom: -40rpx;
  width: 2rpx;
  background-color: #e8e8e8;
}

.timeline-item:last-child::before {
  display: none;
}

.time-point {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #e8e8e8;
  margin-right: 30rpx;
  margin-top: 10rpx;
}

.time-point.active {
  background-color: #63aa5d;
  box-shadow: 0 0 0 6rpx rgba(99, 170, 93, 0.1);
}

.timeline-info {
  flex: 1;
}

.time {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 8rpx;
  display: block;
}

.event {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 8rpx;
  display: block;
}

.location {
  font-size: 24rpx;
  color: #666;
  display: block;
}

/* 材料溯源样式 */
.materials-content {
  padding: 10rpx 0;
}

.material-item {
  background: linear-gradient(to right, #fff, #f9f9f9);
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(99, 170, 93, 0.1);
  transition: all 0.3s ease;
}

.material-item:last-child {
  margin-bottom: 0;
}

.material-header {
  margin-bottom: 24rpx;
  position: relative;
}

.material-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
}

.name::before {
  content: '';
  width: 8rpx;
  height: 8rpx;
  background-color: #63aa5d;
  border-radius: 50%;
  margin-right: 12rpx;
}

.check-result {
  font-size: 24rpx;
  padding: 6rpx 20rpx;
  border-radius: 24rpx;
  background-color: #ff6b6b;
  color: #fff;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.2);
}

.check-result.pass {
  background: linear-gradient(135deg, #63aa5d, #81c17a);
  box-shadow: 0 2px 8px rgba(99, 170, 93, 0.2);
}

.batch-number {
  font-size: 24rpx;
  color: #999;
  display: flex;
  align-items: center;
}

.batch-number::before {
  content: '#';
  margin-right: 4rpx;
  color: #ccc;
}

.material-details {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  padding-top: 20rpx;
  border-top: 1px dashed #eee;
}

.detail-item {
  display: flex;
  align-items: center;
}

.detail-label {
  font-size: 26rpx;
  color: #666;
  width: 120rpx;
  position: relative;
  padding-left: 24rpx;
}

.detail-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 6rpx;
  background: #ddd;
  border-radius: 50%;
}

.detail-value {
  font-size: 26rpx;
  color: #333;
  flex: 1;
}

/* 优化卡片hover效果 */
.material-item:active {
  transform: translateY(2rpx) scale(0.99);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.02);
}
</style>